<template>
    <view class="integral-goods-list-page">
        <view class="header-box">
            <image src="../../static/images/bg_1.png" mode="widthFix" class="bg-img"></image>
            <image src="../../static/images/icon_1.png" mode="widthFix" class="bg-icon"></image>
            <view class="top-bar">
                <image :src="userInfo.avatar" mode="aspectFill" class="avatar"></image>
                <text class="text">{{userInfo.nickname}}</text>
            </view>
            <view class="content">
                <view class="label">当前积分</view>
                <view class="row">
                    <view class="value">{{myScore}}</view>
<!--                    <navigator hover-class="none" url="/package_goods/pages/my_integral_list/my_integral_list"-->
<!--                        class="btn">积分记录></navigator>-->
                  <navigator hover-class="none" url="/package_goods/pages/my_intgral_order/user_order"
                             class="btn">兑换记录></navigator>
                </view>
            </view>
        </view>
        <view class="contain" v-if="true">
            <view class="tab-box">
                <view 
                    class="tab" 
                    :class="{ active: currentTab === 'all' }" 
                    @click="switchTab('all')"
                >
                    全部
                </view>
                <view 
                    class="tab" 
                    :class="{ active: currentTab === 'real' }" 
                    @click="switchTab('real')"
                >
                    实物兑换
                </view>
                <view 
                    class="tab" 
                    :class="{ active: currentTab === 'virtual' }" 
                    @click="switchTab('virtual')"
                >
                    虚拟兑换
                </view>
            </view>
            <!-- 使用scroll-view实现下拉刷新和上拉加载 -->
            <scroll-view 
                class="goods-scroll" 
                :scroll-y="true" 
                @scrolltolower="handleScrollToLower"
                @scrolltoupper="onPullDownRefresh"
                :refresher-enabled="true"
                :refresher-triggered="refreshing"
                @refresherrefresh="onRefresh"
            >
                <view class="goods-list">
                    <view class="item" v-for="(item, index) in goodsList" :key="index" @click="goGoodsDetail(item)">
                        <view class="img-box">
                            <image :src="item.image" mode="" class="img"></image>
                        </view>
                        <view class="info-box">
                            <view class="name">{{ item.name }}</view>
                            <view class="num" v-if="item.type == 10">实物商品</view>
                            <view class="num" v-if="item.type == 20">虚拟商品</view>
                            <view class="btn">
                                <image src="../../static/images/bg_2.png" mode="" class="img"></image>
                                <view class="value-box">
                                    <text class="value">{{ item.score }}</text>
                                    <text class="text">积分</text>
                                </view>
                                <view class="btn-text" @click.stop="buyScore(item)">兑换</view>
                            </view>
                        </view>
                    </view>
                    <loading-footer :status="status"></loading-footer>
                    <!--<view class="empty-box">
                    <image src="../../static/images/empty.png" mode="widthFix" class="img"></image>
                    <text class="text">暂无可兑换商品</text>
                </view> -->
                </view>
            </scroll-view>
        </view>

    </view>
</template>

<script>
    import {
        mapGetters
    } from 'vuex'
    import {
        getMyScore
    } from '@/api/store';
    import {
        loadingType
    } from '@/utils/type'
    import {
        loadingFun,
    } from '@/utils/tools'
    import {
        getGoodsList
    } from '@/api/scoregoods.js'
    
    export default {
        data() {
            return {
                page: 1,
                status: loadingType.LOADING,
                goodsList: [],
                myScore: 0,
                currentTab: 'all', // 当前选中的tab
                tabParams: { // 各个tab对应的参数
                    all: {type:0},
                    real: { type: 10 },
                    virtual: { type: 20 }
                },
                refreshing: false // 下拉刷新状态
            }
        },
        async onShow() {
            getMyScore().then(res => {
                if (res.code != 1) return;
                this.myScore = res.data.user_integral
            })
        },

        onLoad: function(options) {
            this.getGoodsList()
        },
        
        // 下拉刷新
        onPullDownRefresh() {
            console.log("下拉刷新");
            this.refreshData();
        },
        
        // 上拉加载更多数据
        onReachBottom() {
            console.log(this.status,333)
            this.getGoodsList()
        },

        methods: {
            // 切换tab
            switchTab(tab) {
                this.currentTab = tab;
                // 重置分页和数据
                this.page = 1;
                this.goodsList = [];
                this.status = loadingType.LOADING;
                this.getGoodsList();
            },
            
            // 处理滚动到底部事件（上拉加载）
            handleScrollToLower() {
                console.log("滚动到底部，加载更多数据");
                this.getGoodsList();
            },
            
            // 下拉刷新处理
            onRefresh() {
                console.log("触发下拉刷新");
                this.refreshing = true;
                this.refreshData();
            },
            
            // 刷新数据
            refreshData() {
                // 重置分页和数据
                this.page = 1;
                this.goodsList = [];
                this.status = loadingType.LOADING;
                const field = this.tabParams[this.currentTab];
                
                loadingFun(getGoodsList, this.page, this.goodsList, this.status, field).then(
                    (res) => {
                        console.log(res)
                        if (!res) {
                            this.refreshing = false;
                            return
                        }
                        this.page = res.page
                        this.goodsList = res.dataList // 刷新时直接赋值
                        this.status = res.status
                        this.refreshing = false; // 停止刷新动画
                    }
                )
            },
            
            // 获取商品列表数据
            getGoodsList() {
                if (this.status == loadingType.FINISHED) return
                // 参数
                const field = this.tabParams[this.currentTab];
                // 请求
                loadingFun(getGoodsList, this.page, this.goodsList, this.status, field).then(
                    (res) => {
                        console.log(res)
                        if (!res) return
                        this.page = res.page
                        this.goodsList = [...this.goodsList, ...res.dataList]
                        this.status = res.status
                    }
                )
            },
            
            goGoodsDetail(item){
                console.log(item,2222)
                uni.navigateTo({
                    url: `/package_goods/pages/integral_goods_details/details?id=${item.id}`
                })
            },
            
            // 兑换商品点击事件
            buyScore(item) {
                console.log(111,item)
                console.log(this.myScore,222)
                // 判断用户积分是否大于或等于商品积分
                if (this.myScore < item.score) {
                    console.log(222,1111)
                    // 积分不足，弹出提示
                    uni.showToast({
                        title: '积分不足',
                        icon: 'none'
                    })
                    return
                }
                // 积分足够，跳转到score_buy_goods页面并带参数id
               uni.navigateTo({
               					url: '/package_goods/pages/integral_confirm_order/integral_confirm_order?id=' +item.id
               
               				})
            }
        },
        computed: {
            ...mapGetters(['userInfo'])
        }
    }
</script>

<style lang="scss" scoped>
    @import "index.scss";
</style>